<template>
  <el-row class="mosWrap">
    <el-row class="title" type="flex" justify="space-between">
      <el-col type="flex">
        <el-col style="width: 26px">
          <img height="24" src="../../../assets/images/left.png"/>
        </el-col>
        <el-col align="center" style="line-height: 40px;width: 260px">{{ $store.getters.getLocation }}综合业务质量排名</el-col>
        <el-col style="width: 26px">
          <img height="24" src="../../../assets/images/right.png"/>
        </el-col>
      </el-col>
      <el-col
        v-show="$store.getters.getIsGroupUsers && $store.getters.getLocation !== '全国'"
        style="width: 50px"
      >
        <el-button
          type="text"
          size="medium"
          class="chinaButton"
          @click="selectProvince('100000')"
        >返回</el-button>
      </el-col>
    </el-row>
    <el-row type="flex" class="tableHeaderWrap">
      <div class="tableHeader" style="flex: 2">排名</div>
      <div class="tableHeader" style="flex: 4">地域</div>
      <div class="tableHeader" style="flex: 4">综合(分)</div>
      <div class="tableHeader" style="flex: 4">网站(分)</div>
      <div class="tableHeader" style="flex: 5">视频(分)</div>
      <div class="tableHeader" style="flex: 4">DNS(分)</div>
      <div class="tableHeader" style="flex:0.1"></div>
    </el-row>
      <el-carousel height="calc(100vh - 160px)" :interval="5000" direction="vertical" :autoplay="false">
        <el-carousel-item v-for="(item, position) in dataList" :key="position">
          <div style="display: flex;flex-direction: column;height:calc(100vh - 160px);">
            <el-row
              v-for="(city, index) in item"
              :key="index" type="flex"
              :class="index%2 !== 0 ? 'dark' : ''"
              class="tableBody"
              @click.native="selectProvince(city.region_code)"
            >
              <div class="tableName" style="flex: 2">
                <div class="circle">{{ index + 1 + position * 18 }}</div>
              </div>
              <div class="tableName" style="flex: 4">{{ city.region_name }}</div>
              <div class="tableName" style="flex: 4">{{ city.synthesize_score }}</div>
              <div class="tableName" style="flex: 4">{{ city.http_score }}</div>
              <div class="tableName" style="flex: 5">{{ city.flash_score }}</div>
              <div class="tableName" style="flex: 4">{{ city.dns_score }}</div>
              <div class="tableName" style="flex:0.1"></div>
            </el-row>
          </div>
        </el-carousel-item>
      </el-carousel>
  </el-row>
</template>

<script>
  import MapData from '@/config'
  export default {
    name: "Table",
    filters: {
      addPercent(val) {
        if (val || val === 0) {
          return `${val}%`
        } else {
          return '-'
        }
      }
    },
    props: {
      dataList: {
        type: Array,
        default: ()=>[]
      }
    },
    data() {
      return {
        autoplay: true,
        provinceList: MapData.originProvinceList
      }
    },
    methods: {
      selectProvince(code) {
        if (this.provinceList.some(item => item.code == code)) {
          this.$bus.$emit('locationSelect', code)
        }
      }
    }
  }
</script>

<style scoped>
.mosWrap{
  border-radius: 5px;
  background: rgba(14,22,95,0.4);
  box-shadow: inset 0px 0px 50px 0px rgba(0,12,125,1);
  border: 1px solid rgba(14,101,187,0.46);
  height: calc(20vh);
}
.title{
  font-size: 20px;
  line-height: 50px;
  height: 50px;
  text-align: left;
  padding: 6px 16px 0 16px;
  color: #00DDFF;
  font-weight: bold;
}
.tableHeaderWrap{
  background: #003F87;
  border-top: 1px solid rgba(64,169,255,0.5);
  border-bottom: 1px solid rgba(64,169,255,0.5);
  /*margin: 20px 0 10px 0;*/
  padding: 2px 30px 0 10px;
}
.tableHeader{
  flex: 1;
  color: #FFFFFF;
  font-family: Microsoft Tai Le;
  font-weight: 400;
  font-size: 16px;
  line-height: 36px;
  height: 36px;
  text-align: center;
}
.tableName{
  display: flex;
  flex: 1;
  justify-content: center;
  font-family: Microsoft Sans Serif;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
}
.tableBody{
  flex: 1;
  align-items: center;
  padding: 0px 30px 0 10px;
  color: #ffffff;
  max-height: 40px;
  cursor: pointer;
  /*line-height: 50px;*/
}
.tableBody:hover{
  background: linear-gradient(#329ed2,#5b5bf6);
  color: #ffffff;
}
.chinaButton{
  padding: 0;
  font-size: 16px;
  height: 16px;
  height: 16px;
}
.circle{
  font-weight: bold;
  width: 20px;
  height: 20px;
  background: rgb(0, 128, 255);
  border-radius: 50%;
  line-height: 20px;
}
.dark{
  background: rgba(24,66,107,0.7)
}
.dark:hover{
  background: linear-gradient(#329ed2,#5b5bf6);
  color: #ffffff;
}
@media only screen and (min-width: 1921px) {
  .tableHeader {
    font-size: 16px;
  }
}
@media only screen and (max-width: 1920px) {
  .tableHeader {
    font-size: 16px;
  }
}
@media only screen and (max-width: 1600px) {
  .tableHeader {
    font-size: 14px;
  }
}
@media only screen and (max-width: 1440px) {
  .tableHeader {
    font-size: 14px;
  }
}
</style>
